<template>
	<view class="u-flex u-p-t-20 u-p-b-20 u-p-l-30 u-p-r-30" :style="tipsStyle" @click="$emit('click')">
		<u-icon :name="iconLeft" v-if='iconLeft' size='40' class='u-m-r-20' :color="iconColor"></u-icon>
		<view class="u-line-1 u-flex-1">
			{{content}}
		</view>
		<u-icon :name="iconRight" v-if='iconRight' size='40' class='u-m-l-20' :color="iconColorR"></u-icon>
	</view>
</template>

<script>
	export default {
		computed:{
			tipsStyle(){
				let style={
					'border-radius': '8rpx',
					background:`${this.tipsBgColor}`
				}
				return style
			}
		},
		props: {
			iconLeft:{
				type: String,
				default: ''
			},
			iconRight:{
				type: String,
				default: ''
			},
			tipsBgColor: {
				type: String,
				default: '#f5f5f5'
			},
			iconColor:{
				type: String,
				default: '#33e'
			},
			iconColorR:{
				type: String,
				default: '#b2b2b2'
			},
			content:{
				type: String,
				default: 'asdfasf '
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style>
.a{
	background: ;
}
</style>
